import React, {Component, Fragment} from 'react'
import { Input, Button, Icon, Form } from 'antd'

const { TextArea } = Input;

class FromMsg extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:''
        }
        this.handleSubmit.bind(this)
    }

    handleSubmit = e => {
        const {receiveData} = this.props
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            // console.log('Received values of form: ', values);
            receiveData(values)
            console.log(this.props.form)
            // this.setState({

            // })
          }
        });
        
        
      };

    render(){
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 3 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 21 },
            },
          };
         
        const tailFormItemLayout = {
            wrapperCol: {
              xs: {
                span: 24,
                offset: 0,
              },
              sm: {
                span: 4,
                offset: 20,
              },
            },
          };  

        return (
            <Fragment>
                <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                    <Form.Item label="Author">
                        {getFieldDecorator('Author', {
                            rules: [{ required: true, message: 'Please input your username!' }],
                        })(
                            <Input
                            placeholder="Author"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="Message">
                    {getFieldDecorator('Message', {
                            rules: [{ required: true, message: 'Please input your Message!' }],
                        })(
                            <TextArea rows={4} placeholder="Message..." />,
                        )}
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" block><Icon type="export" />提交留言</Button>
                    </Form.Item>
                </Form>
            </Fragment>
        )
    }

}

const WrappedFromMsg = Form.create({ name: 'From_Msg' })(FromMsg);

export default WrappedFromMsg